<template>
  <view class="basic bgDefault tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
	<tn-nav-bar  fixed>评论列表</tn-nav-bar>
	<view class="index_content">
		<view class="comment tn-radius10">
			<view class="title">
				<span>客户评价</span>
				<span class="more"></span>
			</view>
			
			<view class="tips">
				<span class="tj">客户推荐</span>
				<span>{{total}}人推荐并好评</span>
			</view>
			
			<view class="number">
				<view>
					<i class="tn-icon-star-fill star"></i>
					<span><span class="starNumber">{{parseFloat(rate).toFixed(1)}}</span>{{rateText(rate)}}</span>
				</view>
				<!-- <view class=""评分></view> -->
			</view>
			
			<view class="user_comment" v-for="(item,index) in list" :key="index">
				<view class="userInfo">
					<image class="logo" mode="aspectFill" :src="item.user.avatar"></image>
					<view class="info">
						<view class="nickname">{{item.user.nickname}}</view>
						<view class="desc">
							<span>{{item.created_at|parseTime('{y}-{m}-{d}')}}参加</span>
							<span class="star">
								<tn-rate activeColor="#ff0000" v-model="item.star" :size="24" :allowHalf="true" :disabled="true"></tn-rate>
							</span>
							<span class="tag tn-radius10">{{rateText(getStar(item))}}</span>
						</view>
					</view>
				</view>
				<view class="content">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
		
	</view>
</template>

<script>
	import {commentList} from '@/api/space/index.js'
	export default {
		data() {
			return {
				
				selectParam:{
					id:"",
					type:"",
					page:1,
					size:50
				},
				list:[],
				rate:5,
				total:0
			}
		},
		onLoad(e) {
			this.selectParam.type = e.type
			this.selectParam.id = e.id
			
			this.initData()
			
		},
		methods: {
			initData(){
				commentList(this.selectParam).then(res=>{
					this.rate = res.rate
					this.total = res.total
					this.list = res.data
					
					this.list.map(re=>{
						re.star = this.getStar(re)
						re.content = this.getContent(re)
					})
				})
			},
			rateText(rate) {
				if (rate > 4.5) return "超预期";
				if (rate > 3.5) return "非常好";
				if (rate > 2) return "一般般";
				return "体验很差";
			},
			
			getStar(item){
				if(this.selectParam.type == 0) return item.m_star*1;
				if(this.selectParam.type == 1) return item.space_star*1;
				else return item.activity_star*1;
			},
			getRate(item){
				if(this.selectParam.type == 0) return item.m_rate;
				if(this.selectParam.type == 1) return item.space_rate;
				else return item.activity_rate;
			},
			getContent(item){
				if(this.selectParam.type == 0) return item.m_content;
				if(this.selectParam.type == 1) return item.space_content;
				else return item.activity_content;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tn-radius10 {
		border-radius: 10rpx;
	}
.comment {
		margin-top: 19rpx;
		background: #fff;
		width: 100%;
		padding: 30rpx 52rpx;
		overflow: hidden;

		.title {
			font-weight: bold;
			font-size: 14px;
			display: flex;
			justify-content: space-between;

			.more {
				color: #666;
				font-size: 12px;
			}
		}

		.tips {
			line-height: 52rpx;
			font-size: 12px;
			color: #666;

			.tj {
				color: $tn-main-orange;
				margin-right: 29rpx;
				font-size: 13px;
			}
		}

		.number {
			.star {
				color: #ff0000;
				display: inline;
				font-size: 36rpx;
				margin-right: 24rpx;
			}

			span {
				line-height: 72rpx;
				font-size: 24rpx;

				.starNumber {
					font-size: 36rpx;
				}
			}
		}

		.user_comment {
			margin-bottom: 12px;

			.userInfo {
				.logo {
					width: 36px;
					height: 36px;
					float: left;
					border-radius: 50%;
					margin-right: 17rpx;
				}

				.info {
					.nickname {
						font-size: 14px;
						color: #333;
						line-height: 23px;
					}

					.desc {
						font-size: 12px;
						color: #666;

						.star {
							color: #ff0000;
							display: inline;
							font-size: 12px;
							margin-left: 5rpx;
							margin-right: 5rpx;
						}

						.tag {
							background-color: $tn-main-orange;
							color: #fff;
							padding: 1rpx 8rpx;
							font-size: 12px;
						}
					}
				}
			}

		}

		.content {
			font-size: 12px;
			margin-top: 6px;
			color: #666;
			line-height: 18px;
		}
	}
  
  .bgDefault {
  	background: $tn-main-bg;
  	height: 100vh;
  
  	.index_content {
  		padding: 0 7%;
  	}
  }
</style>
